<template>
  <div class="play-list">
    <el-button class="listBtn" @click="listDrawer = true"> 列表 </el-button>

    <el-drawer v-model="listDrawer" :direction="direction" :with-header="false">
      <div class="title">播放列表</div>
      <div>
        <div class="flex-content">
          <p v-for="item in nameList" :key="item" class="scrollbar-demo-item">
            {{ item }}
          </p>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import localCache from '@/utils/cache'
import emitter from '@/utils/mitt/eventbus'
export default defineComponent({
  setup() {
    const direction = ref('btt')
    const nameList = ref([])
    const currentName = ref('')

    /*     if (localCache.getCache('playList').nameCacheList) {
      console.log(1)
      nameList.value = localCache.getCache('playList')?.nameCacheList
    }
    if (localCache.getCache('currentName')) {
      console.log(2)
      currentName.value = localCache.getCache('currentName')
    } */
    emitter.on('isPlaying', (currentIndex: any): void => {
      nameList.value = localCache.getCache('playList')?.nameCacheList
      currentName.value = nameList.value[currentIndex]
      console.log('name')
    })
    return {
      direction,
      listDrawer: ref(false),
      nameList,
      currentName
    }
  }
})
</script>

<style scoped lang="less">
.play-list {
  .listBtn {
    width: 40px;
    height: 100%;
    border-radius: 50%;
    border: none;
    background: rgba(80, 80, 80, 0.281);
    color: #fff;
    padding: 0;
    text-align: center;
    span {
    }
  }

  .title {
    text-indent: 0.4rem;
    font-size: 0.16rem;
    height: 0.5rem;
    line-height: 0.5rem;
    color: #fff;
    background: rgb(46, 46, 46);
  }
  .flex-content {
    height: 248px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgb(34, 34, 34);

    .scrollbar-demo-item {
      height: 0.4rem;
      line-height: 0.4rem;
      margin: 8px 20px 8px 37px;
      color: rgb(131, 131, 131);
      text-align: center;
      cursor: pointer;

      &:nth-child(1) {
        color: rgb(255, 255, 255);
        box-shadow: 1px 1px 10px rgba(21, 151, 86, 0.171);
      }
      &:hover {
        color: rgb(255, 255, 255);
        transform: scale(1.1);
      }
    }
  }
}
</style>
